<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 诸葛龙辰
  Date: 2023/3/3
  Time: 19:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工管理</title>
    <!--引入jquery-->
    <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
</head>

<body>
<h2 align="center" style="background-color: red">员工管理</h2>
<div align="center" ><a href="/emp/add.jsp" >添加</a>&nbsp;</div>
<div style="text-align: center">
        名称：<input type="text" id="empName" >&nbsp;&nbsp;
        位置：<input type="text" id="province" >&nbsp;&nbsp;
        <input type="button" id="searchBtn"   value="查询" >
</div>

<table align="center" border="1" width="600px" style="background-color: red">
    <tr style="background-color: pink">
        <td>员工编号</td>
        <td>名字</td>
        <td>电话</td>
        <td>部门编号</td>
        <td>操作</td>
    </tr>
   <tbody id="tbd"></tbody>
    <tr  style='background-color:rosybrown'>
        <td colspan="4">共<span id="total"></span>条<span id="maxPage"></span>&nbsp;&nbsp;页 &nbsp;
            <a id="firstPage" href="javascript:void(0)">首页</a>&nbsp;&nbsp;&nbsp;
            <a id="prePage" href="javascript:void(0)">上一页</a>&nbsp;&nbsp;&nbsp;
            <a id="nextPage" href="javascript:void(0)">下一页</a>&nbsp;&nbsp;
            <a id="lastPage" href="javascript:void(0)">尾页</a>
        </td>
    </tr>
</table>
<script>
    //定义全局变量， 让各个方法都可以调用
    let pageNo = 1,maxPage = 0, total =0, empNameA='',provinceA='';
    //jquery初始化方法 需要页面初始化加载的代码放在这里面。相当于onload
    $(function (){
        //arter(111)
        //调用封装方法
        loadData();
        //首页点击事件
        $("#firstPage").click(function (){
            pageNo = 1;
            loadData();
        });
        //上一页点击事件
        $("#prePage").click(function (){
            pageNo --;
            loadData();
        });
        //下一页的点击事件
        $("#nextPage").click(function (){
            pageNo ++;
            loadData();
        });
        //尾页的点击事件
        $("#lastPage").click(function (){
            pageNo =maxPage;
            loadData();
        });
        //查询点击事件
        $("#searchBtn").click(function (){
            empNameA = $("#empName").val();
            provinceA = $("#province").val();
            loadData();
        });
    });
//加载数据方法
    function loadData(){
        //使用jQuery的ajax从后台获取数据
       $.ajax({
            //请求地址
            url:"/EmpServlet/queryPage",
            type:"get",//请求的方法
            data:{pageNo:pageNo,empName:empNameA,province:provinceA},//请求携带的参数
            dataType:"json",//定义返回值发格式
            success:function (data){//成功回调函数 data=返回的json 对象
                //清除原有数据
                $("#tbd").empty()
                     //判断data是否有值
                if (data!=null && data!='' && data!='undefined' && data!='null'){
                    //给条数赋值
                    $("#total").html(data.total);
                    $("#maxPage").html(data.maxPage);
                    //给maxPage赋值
                    maxPage =data.maxPage;
                    //给total赋值
                    total = data.total;
                    //获取对象列表信息 循环遍历

                    for (let i = 0; i < data.empMapListA.length; i++) {
                    // 11 财务部   郑州 循环一次一个值。。
                        const empMap = data.empMapListA[i];
                        if (i%2 ==0){
                 $("#tbd").append( "<tr style='background-color: purple'><td>"+empMap.emp_id+"</td>"+
              "  <td>"+empMap.emp_name+"</td><td>"+empMap.phone_num+"</td><td>"+empMap.dept_no+"</td><td>"+
                   " <a href='/emp/update.jsp?empId="+empMap.emp_id+" ' >更新</a>&nbsp;"+
                   " <a href='javascript:del("+ empMap.emp_id +")'>删除</a></td></tr>");
                        }else{
                            $("#tbd").append(" <tr style='background-color: purple'><td>"+empMap.emp_id+"</td>"+
                                "  <td>"+empMap.emp_name+"</td>"+
                                "<td>"+ empMap.phone_num +"</td>"+
                                " <td>"+ empMap.dept_no +"</td>"+
                                " <td>"+
                                " <a href='/emp/update.jsp?empId="+empMap.emp_id+" ' >更新</a>&nbsp;&nbsp;"+
                                " <a href='javascript:del("+empMap.emp_id+")'>删除</a></td></tr>");
                        }
                    }

                }
            },
            error:function (errorData){
                alert("请求失败")
            }
        })
    }
    //删除方法
    function del(empId){
        //确认删除？
        if (confirm("确认删除该条数据吗？")){
            $.ajax({
                url:"/EmpServlet/delete",
                type:"get",//请求的方法
                data:{empId,empId},
                contentType:"json",
                success:function (data){
                    if (data>0){
                        location.href = "/emp/list.jsp";
                    }else{
                        $("#error").html("删除失败！！")
                    }
                },
                error: function(data){
                    alert("删除失败")
                }
            });
        }
        }

</script>

</body>
</html>
